import React from 'react';
import { useHistory } from 'react-router-dom';
import './index.less';
import classnames from 'classnames';
import tabs from '../../config/tabConfig';
import { i18n } from '../../utils/language';

interface Tabprops {
  currentIndex: Number;
}
function Tabbar(props: Tabprops) {
  console.log('tabbar props', props, tabs);
  const history = useHistory();
  console.log('tab history', history);
  function goTab(props: string) {
    history.push(props);
  }
  return (
    <div className='footer'>
      {tabs.map((item, index) => {
        return (
          <div key={index} onClick={() => goTab(item.url)} className='footer-item'>
            <img src={props.currentIndex === index ? item.iconSelect : item.icon} alt='' />
            <div className={classnames({ active: props.currentIndex === index })}>{i18n.t(item.name)}</div>
          </div>
        );
      })}
    </div>
  );
}

export default Tabbar;
